<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jx.Notifier Examples</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../lib/mootools-core.js"></script>
<script type="text/javascript" src="../../lib/mootools-more.js"></script>
<script type="text/javascript" src="../../lib/jxlib.standalone.uncompressed.js"></script>
<script src="js/tests.js" type="text/javascript" charset="utf-8"></script>
<script src="js/locale.js" type="text/javascript" charset="utf-8"></script>

<script  type="text/javascript">
window.addEvent('load', function() {
    drawBasicNotifier();
}); 
if($(document).getElements('.tabContentActiveExamples').length > 0) {
  $(document).getElements('.tabContentActiveExamples')[0].addEvent('loadAjax', function() {
    drawBasicNotifier();
  });
}
</script>
<script id="basicNotifierScript" type="text/javascript" charset="utf-8">
function drawBasicNotifier() {
  var form = new Jx.Form({
    name: 'testForm',
    formClass: 'jxFormInline'
  }).addTo('formBasicNotification');
  

// First Fieldset

  var fieldSet1 = new Jx.Fieldset({
    legend: 'Inline-Block Form',
    id: 'FieldSet1',
    fieldsetClass: 'jxFormInlineblock'
  }).addTo(form);
  
  var notifier = new Jx.Notifier({
    parent: fieldSet1
  });

  var flotifier = new Jx.Notifier.Float({});

  // var notifier = new Jx.Notifier.Float();

  var field1 = new Jx.Field.Text({
    id: 'Text1',
    name: 'Text1',
    label: 'Text One',
    value: '',
    tag: 'a tag'
  })

  field1.addTo(fieldSet1);

  var plugin = new Jx.Plugin.Field.Validator({
      validators: ['minLength:4','maxLength:10'],
      validateOnBlur: true,
      validateOnChange: false
  });
  plugin.attach(field1);

  plugin.addEvent('fieldValidationFailed', function(field, validator){
      var p = new Element('p',{
          html: field.id + ' failed validation. Errors:'
      });
      var ul = new Element('ul');
      var errs = validator.getErrors();
      errs.each(function(err){
          var li = new Element('li',{
              html: err
          });
          li.inject(ul);
      });
      var msg = new Element('div');
      msg.adopt(p,ul);
      flotifier.add(new Jx.Notice.Error({content: msg}));
  });
  
  plugin.addEvent('fieldValidationPassed', function(field, validator){
      flotifier.add(new Jx.Notice.Success({content: field.id + ' passed validation.'}));
  });
  
  /**
  new Jx.Field.Button({
    buttonOptions:{label: 'Float Warning', onClick: function() {
      flotifier.add(new Jx.Notice.Warning({content: 'You clicked the warning button'}));
    }}
  }).addTo(fieldSet1);
  **/
  
  var field2 = new Jx.Field.Text({
    id: 'Text2',
    name: 'Text2',
    label: 'Text Two',
    value: '',
    tag: 'a tag',
    required: true
  });
  field2.addTo(fieldSet1);


  var plugin2 = new Jx.Plugin.Field.Validator({
      validateOnBlur: true,
      validateOnChange: false
  });
  plugin2.attach(field2);

  plugin2.addEvent('fieldValidationFailed', function(field, validator){
      var p = new Element('p',{
          html: field.id + ' failed validation. Errors:'
      });
      var ul = new Element('ul');
      var errs = validator.getErrors();
      errs.each(function(err){
          var li = new Element('li',{
              html: err
          });
          li.inject(ul);
      });
      var msg = new Element('div');
      msg.adopt(p,ul);
      flotifier.add(new Jx.Notice.Error({content: msg}));
  });
  
  plugin2.addEvent('fieldValidationPassed', function(field, validator){
      flotifier.add(new Jx.Notice.Success({content: field.id + ' passed validation.'}));
  });

  /**
  new Jx.Field.Button({
    buttonOptions:{label: 'Error', onClick: function() {
      notifier.add(new Jx.Notice.Error({content: 'You clicked the error button'}));
    }}
  }).addTo(fieldSet1);
  **/
  var field3 = new Jx.Field.Text({
    id: 'Text3',
    name: 'Text3',
    label: 'Text Three',
    value: 'Initial Value',
    tag: 'a tag'
  });
  field3.addTo(fieldSet1);

  var plugin3 = new Jx.Plugin.Field.Validator({
      validators: ['validate-email'],
      validateOnBlur: true,
      validateOnChange: false
  });
  plugin3.attach(field3);

  plugin3.addEvent('fieldValidationFailed', function(field, validator){
      var p = new Element('p',{
          html: field.id + ' failed validation. Errors:'
      });
      var ul = new Element('ul');
      var errs = validator.getErrors();
      errs.each(function(err){
          var li = new Element('li',{
              html: err
          });
          li.inject(ul);
      });
      var msg = new Element('div');
      msg.adopt(p,ul);
      notifier.add(new Jx.Notice.Error({content: msg}));
  });
  
  plugin3.addEvent('fieldValidationPassed', function(field, validator){
      notifier.add(new Jx.Notice.Success({content: field.id + ' passed validation.'}));
  });
  /**
  new Jx.Field.Button({
    buttonOptions:{label: 'Success', onClick: function() {
      notifier.add(new Jx.Notice.Success({content: 'You clicked the success button'}));
    }}
  }).addTo(fieldSet1);
  **/



  
}
</script>
</head>
<body>

<h1>Jx.Notifier Examples</h1>
<p>API Reference: <a id="form-js" href="javascript:void();" title="link to API Reference">Jx.Notofier</a></p>

<h2 id="basicNotifier">A Form with a Notifications</h2>
<p>A programmatically created form with several fields and buttons to test validation and notification.</p>
<p>The form below requires the following validation:</p>
<ul>
    <li>The first field below requires an entry between 4 and 10 characters in length.</li>
    <li>The second field is simply required to be filled out.</li>
    <li>The third box will require an email address.</li>
</ul>
<div id="formBasicNotification" class="formBox"></div>

</body>
</html>
